<template>
    <div>
        <div>
            <!-- 先做页面布局 再对接口 -->
            <div style="color:#999; margin:5px;">8月24日</div>
            <el-row :gutter="20" style="color:#ff6900;font-weight:700;height;100px">
                <el-col :span="8">
                    <div class="grid-content bg-purple" style="color:red">8</div>
                    <div class="grid-content bg-purple" style="color:black;font-weight:700px">新增确诊</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple" style="color:red">0</div>
                    <div class="grid-content bg-purple" style="color:black">本土新增</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple" style="color:red">8</div>
                    <div class="grid-content bg-purple" style="color:black">境外输入</div>
                </el-col>
            </el-row>
        </div>

        <div>
            <div style="color:#999; margin:5px;">截止：{{endTime}}</div>
            <el-row class="upToNow" :gutter="20">
                <el-col :span="8" v-for='item in listData' :key='item.id' style="color:#ff6900;font-weight:700" >
                    <div class="grid-content" style="background-color: #fbf5ef; color:red;">{{item.num}}</div>
                    <div class="grid-content" style="background-color: #fbf5ef; color:black">{{item.name}}</div>
                </el-col>  
            </el-row>
        </div>

        <div class="table">
            <!-- {{tableData}} -->
            <div style="margin:10px; color:#999; margin:5px;">国内病例</div>
            <el-row>
                <el-col :span="4"><div style="background-color:#e0e1fd;" class="grid-content">地区</div></el-col>
                <el-col :span="4"><div style="background-color:#dd837f;" class="grid-content">新增确诊</div></el-col>
                <el-col :span="4"><div style="background-color:#f4d3aa;" class="grid-content">新增疑似</div></el-col>
                <el-col :span="4"><div style="background-color:#fdcccb;" class="grid-content">新增死亡</div></el-col>
                <el-col :span="4"><div style="background-color:#c5eab4;" class="grid-content">新增治愈</div></el-col>
                <el-col :span="4"><div style="background-color:#d2d2d2;" class="grid-content bg-purple-light">境外输入</div></el-col>
            </el-row>

            <el-row class="buttom-line" v-for="item in tableData" :key='item.id'>
                <el-col :span="4">
                    <div style="background-color:ghostwhite" class="grid-content">{{item.province}}</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:ghostwhite" class="grid-content">{{item.confirmed}}</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:ghostwhite" class="grid-content">{{item.suspected}}</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:ghostwhite" class="grid-content">{{item.dead}}</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:ghostwhite" class="grid-content">{{item.cure}}</div>
                </el-col>
                <el-col :span="4">
                    <div style="background-color:ghostwhite" class="grid-content">{{item.outside}}</div>
                </el-col>
            </el-row>
        </div>

        <div>

            <div style="margin:10px;">最新进展</div>

            
            <div @click="showDetail(item)" style="background-color:#f8f8f8; padding:20px 10px;" v-for="item in latestNews" :key="item.id">
                <div class="circle"></div>
                <div class="tag">最新</div>
                <div class="time">{{item.publishTime | dateFmt}}</div>

                <div class="content">{{item.title}}</div>

            </div>
            
        </div>

        <!-- 详情模态框 -->
        <!-- v-html可以将变量中的标签解析出来 -->
        <el-dialog title="新闻咨询" :visible.sync="dialogFormVisible">
            <div v-html="dialogData.content"></div>
        </el-dialog>
    </div>
</template>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .table .el-row {
      margin-bottom: 0;
  }
  .table .el-col {
      margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #eefaff;
    height: 25px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    line-height: 40px;
    text-align:center;
    min-height: 40px;
    font-weight:500;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  /* 添加下划线 */
  .buttom-line div {
      border-bottom:1px solid #ededed
  }

  .circle {
      width:10px;
      height:10px;
      border-radius: 50%;
      background-color: royalblue;
  }
  .tag {
      background-color: red;
      color:white;
      font-size: 14px;
      padding: 4px;
      border-radius: 5px;
  }
  .time {
      font-weight: 600px;
  }

  .circle,.tag,.time {
      display: inline-block;
      margin-right: 10px;
  }

  .content {
      background-color: ghostwhite;
      padding: 10px;
      border-radius:5px;
      margin-top: 10px;
  }

</style>

<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return {
            params:{page:1,pageSize:10000},
            // 列表数据
            listData:[],
            // 表格数据
            tableData:[],
            latestNews:[],
            endTime:'',
            dialogFormVisible:false,
            dialogData:{},
        }
    },
    created(){
        this.queryAll()
        this.queryNews()
    },
    // 处理时间格式
    filters:{
        dateFmt(str){
            return moment(str).format("YYYY年MM月DD日HH时")
        }
    },
    methods:{
        
        queryAll(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 封装表格数据
                this.tableData = res.data.data.list
                // 遍历确诊人数
                var confirmed_total = 0;
                var dead_total = 0;
                var suspected_total = 0;
                var cure_total = 0;
                var severe_total = 0;
                var outside_total = 0;
                
                res.data.data.list.forEach((item)=>{
                    this.endTime = moment(res.data.data.list[0].inputTime).format("YYYY年MM月DD日HH时")
                    confirmed_total += item.confirmed
                    dead_total += item.dead
                    suspected_total += item.suspected
                    cure_total += item.cure
                    severe_total += item.severe
                    outside_total += item.outside
                })
                var obj1 = {
                    id:1,
                    name:'现有确诊',
                    num:confirmed_total
                }
                var obj2 = {
                    id:2,
                    name:'现有疑似',
                    num:suspected_total
                }
                var obj3 = {
                    id:3,
                    name:'累计出院',
                    num:cure_total
                }
                var obj4 = {
                    id:4,
                    name:'累计境外输入',
                    num:outside_total
                }
                var obj5 = {
                    id:5,
                    name:'现有重症',
                    num:severe_total
                }
                var obj6 = {
                    id:6,
                    name:'累计死亡',
                    num:dead_total
                }
                this.listData.push(obj1,obj2,obj3,obj4,obj5,obj6)
            })

        },

        queryNews(){
            // 数据的封装！
            let obj = {
                page:1,
                pageSize:1000,
                // 查询最新系统动态
                categoryId:3
            }

            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method:'get',
                params:obj
            }).then((res)=>{
                // 赋值给显示数组
                this.latestNews = res.data.data.list
            })
        },
        // 显示文章详情
        showDetail(item){
            // 点击div获取的详细内容
            this.dialogData = item
            this.dialogFormVisible = true
        }

    }
}
</script>